<template>
  <a-input-group size="small">
    <slot name="input">
      <a-input
        v-if="inputType === 'text'"
        v-model="iValue"
        :disabled="disabled"
        :style="`width:${inputWidth};font-size:12px;border-radius: 0;`"
        @blur="updateData"
      />
      <a-input
        v-if="inputType === 'number'"
        v-model.lazy="iValue"
        @change="changeNumber"
        :disabled="disabled"
        :style="`width:${inputWidth};font-size:12px;border-radius: 0;`"
        @blur="updateData"
      />
    </slot>
    <slot name="select">
      <d-select
        :style="`border-left:none;width:${selectWidth};min-width:none`"
        :value.sync="sValue"
        :disabled="disabled"
        :options="selectOption"
        @change="
          val =>
            change({
              inputValue: iValue,
              selectValue: val
            })
        "
      />
    </slot>
  </a-input-group>
</template>

<script>
import DSelect from './DSelect.vue';

export default {
  name: 'DInputDropdown',
  props: {
    inputType: {
      type: String,
      default: 'text'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    selectOption: {
      type: Array,
      default: () => []
    },
    selectWidth: {
      type: String,
      default: '50%'
    },
    inputWidth: {
      type: String,
      default: '50%'
    },
    inputValue: {
      type: [String, Number, null],
      default: null
    },
    selectValue: {
      type: String,
      default: ''
    }
  },
  components: {
    DSelect
  },
  data() {
    return {
      iValue: '',
      sValue: ''
    };
  },
  watch: {
    sValue(val, old) {
      if (old) {
        this.change({
          inputValue: this.inputValue,
          selectValue: this.selectValue
        });
        this.$emit('update:selectValue', val);
      }
    }
  },
  methods: {
    change(data) {
      this.$emit('change', data);
    },
    changeNumber(e) {
      let val = e.target.value;
      this.iValue = 2;
      if (val) {
        if (isNaN(parseInt(val))) {
          this.iValue = '';
        } else {
          this.iValue = parseInt(val);
        }
      } else {
        this.iValue = '';
      }
    },
    updateData() {
      this.change({
        inputValue: this.iValue,
        selectValue: this.sValue
      });
    }
  },
  created() {
    this.iValue = this.inputValue;
    this.sValue = this.selectValue;
  }
};
</script>

<style lang="scss" scoped>
::v-deep .tw-select-enabled {
  border-left: none !important;
}
::v-deep .tw-select-selection {
  border-left: none;
}
</style>
